<!-- 添加联系人或群组页面 -->
<template>
  <div class='add-contact-container'>
    <van-sticky>
      <van-search v-model="searchValue"
                  clearable
                  show-action
                  placeholder="请输入好友id/手机号/邮箱"
                  @search="onSearch"
                  @clear="onclear"
                  @cancel="onCancel" />
    </van-sticky>

    <div class="result-container">

      <van-cell center
                v-for="(item, index) in searchResult"
                :key="index">
        <template #icon>
          <van-image width="40"
                     height="40"
                     :src="item.avatar" />
        </template>
        <template #title>
          <span class="username-style">{{item.realName}}</span>
        </template>
        <template #right-icon>
          <van-button plain
                      hairline
                      type="success"
                      class="add-style"
                      @click="addClick(item.phone)">添加</van-button>

        </template>
      </van-cell>
    </div>

    <!-- 搜索提示 -->
    <van-empty v-if="searchResult.length === 0"
               image="search"
               description="请输入好友id/手机号/邮箱" />

    <!-- 添加好友发送额外信息弹框 -->
    <van-popup v-model:show="showPopup"
               round
               @close="closePopup"
               closeable>
      <div class="popup-style">

        <p class="leaving-message-style">请输入验证信息</p>
        <van-field v-model="leavingMessage"
                   autosize
                   clearable
                   type="textarea"
                   maxlength="50"
                   placeholder="请输入验证信息"
                   show-word-limit
                   @clear="clearContent" />

        <van-button class="send-btn-style"
                    type="danger"
                    @click="sendAddFrendMessage">发送</van-button>

      </div>

    </van-popup>

  </div>
</template>

<script>
import { Toast } from 'vant';
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    //这里存放数据
    return {
      showPopup: false,
      searchValue: '',
      searchResult: [],
      leavingMessage: '',
      // 当前被添加朋友的唯一标识
      toIdentity: ''
    }
  },
  //方法集合
  methods: {
    onSearch () {
      // 清空上次的内容
      this.searchResult = [];
      this.$http
        .get(this.$reqPrefix.user + "/users/" + this.searchValue, {}).then(res => {
          if (res.data) {
            this.searchResult.push(res.data);
          } else {
            Toast.fail("未查到数据！")
          }
        }).catch(err => {
          Toast.fail(err.data.message)
        });
    },
    onclear () {
      this.searchResult = [];
    },
    onCancel () {
      // 返回上一层
      this.$router.go(-1);
    },
    // 添加好友的事件触发
    addClick (phone) {
      // 弹出弹框
      this.showPopup = true;
      this.toIdentity = phone;
    },
    // 清除弹框的留言内容
    clearContent () {
      this.leavingMessage = ''
    },
    // 弹框关闭时会触发该函数
    closePopup () {
      this.leavingMessage = ''
      this.toIdentity = '';
    },

    // 发送添加朋友消息
    sendAddFrendMessage () {
      // 从缓存中取出socket 对象进行调用send() 方法来发送
      const socket = this.$store.state.socket;
      if (socket) {
        // 封装添加好友的消息类型
        let addfriendReqMessage = new proto.com.ouyu.im.Message();
        addfriendReqMessage.setFrom(this.$socket.config.identity)
        addfriendReqMessage.setTo(this.toIdentity)
        addfriendReqMessage.setContentType(SOCKET_CONSTANT.PACKET.MESSAGE_CONTENT_TYPE.TEXT_CONTENT);
        addfriendReqMessage.setContent(this.leavingMessage);
        // 时间戳毫秒
        addfriendReqMessage.setCreateTime(new Date().getTime());
        socket.send(addfriendReqMessage, SOCKET_CONSTANT.PACKET.MESSAGE_TYPE.IM_FRIEND_ADD_REQ);

        // 关闭弹框
        this.showPopup = false;
      } else {
        Toast.fail("无效连接！")
      }
    },


  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  //生命周期 - 创建之前
  beforeCreate () {

  },
  //生命周期 - 挂载之前
  beforeMount () {

  },
  //生命周期 - 更新之前
  beforeUpdate () {

  },
  //生命周期 - 更新之后
  updated () {

  },
  //生命周期 - 销毁之前
  beforeDestroy () {

  },
  //生命周期 - 销毁完成
  unmounted () {
  },
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated () {

  }
}
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.add-contact-container {
  position: absolute;
  height: 100%;
  width: 100%;
  background: whitesmoke;
}
.result-container {
  border-top: 1px solid #ebedf0;
}
.username-style {
  margin-left: 10px;
}
.add-style {
  border-radius: 5px;
}
.popup-style {
  background: whitesmoke;
  text-align: center;
  width: 8rem;
  height: 8rem;
  padding: 0.5rem;
}
.leaving-message-style {
  text-align: left;
  color: #969799;
}
.send-btn-style {
  margin-top: 80px;
  width: 90%;
  border-radius: 20px;
}
</style>